<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>152_读取样式</title>
		<style>
			.box1 {
				width: 200px;
				height: 200px;
				background-color: #bfa;
			}

			/* 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容 */
			/* 通过before添加一个文本 */
			.box1::before {
				content: "hello";
				color: red;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我一下</button>

		<hr />

		<div class="box1"></div>

		<script>
			/* 
                点击按钮后，读取样式
            */

			const btn = document.getElementById("btn")
			const box1 = document.querySelector(".box1")

			btn.onclick = function() {
				/* 
				getcomputedstyle(
					-它会返回一个对象，这个对象中包含了当前元素所有的生效的样式；
					- 参数:
						1.要获取样式的对象
						2.要获取的伪元素
					-返回值:
						返回的一个对象，对象中存储了当前元素的样式；
					注意:
						样式对象中返回的样式值，不一定能来拿来直接计算所以使用时，一定要确保值是可以计算的才去计算；
				 */
				const style0bj = getComputedStyle(box1)
				//console.log(style0bj.color)
				//console.log(style0bj.backgroundColor)


				//读取到底宽度是带有单位的，没法直接计算，需要转换一下。
				console.log(parseInt(style0bj.width) + 100)
				//计算结束后要再加上单位，设置才能生效。
				box1.style.width = parseInt(style0bj.width) + 100 + "px"


				//获取伪元素的样式
				const beforeStyle = getComputedStyle(box1, "::before")
				console.log(beforeStyle.color); //rgb(255, 0, 0),读取的是红色
			}
		</script>
	</body>
</html>